<template>
  <div flex-1-hidden h-full px-10>
    <n-scrollbar
      :x-scrollable="true"
      flex-1-hidden
      h-full
      content-class="h-full"
    >
      <div
        f-y-c
        h-full
        :style="{ justifyContent: theme.menu.horizontalPosition }"
      >
        <n-menu
          :value="(route.name as string)"
          mode="horizontal"
          :options="routeStore.menus"
          :inverted="theme.header.inverted"
          @update:value="handleUpdateMenu"
        />
      </div>
    </n-scrollbar>
  </div>
</template>

<script setup lang="ts">
import type { MenuOption } from "naive-ui";
import { useRouteStore, useThemeStore } from "@/store";
import { routerPush } from "@/utils";

const route = useRoute();
const routeStore = useRouteStore();
const theme = useThemeStore();

function handleUpdateMenu(_key: string, item: MenuOption) {
  const menuItem = item as App.GlobalMenuOption;
  routerPush(menuItem.path, menuItem.newTab);
}
</script>

<style scoped>
:deep(.n-menu-item-content-header) {
  overflow: inherit !important;
}
</style>
